<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head lang="zh-cn">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Keywords" content="前端网站导航,大前端网址导航,前端工程师网址导航,前端导航,前端工程师导航,CSS,JavaScript,Ajax,jQuery,html,html5,css3,JSON,node.js,node,express,前端开发工程师,JS压缩工具,JS格式化工具,CSS参考手册,HTML参考手册,前端工程师招聘,浏览器兼容,W3C,前端优化,前后分离">
    <meta name="description" content="前端资源导航为童鞋们提供学习方向、学习途径、和业界最新消息、最新资料等。编程工具、国外牛人、国内牛人、JS框架、UI框架、JS库、CSS库。每周更新及时。">
    <title>前端资源导航 - 屌丝必备</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" href="source/css/normalize.css">
    <link rel="stylesheet" href="source/css/main.css">
    <link rel="stylesheet" href="source/less/f2enav.css"/>

    <!--FONT ICON-->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1427203800_0405784.css"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!--[if lt IE 8]>
    <script type="text/javascript" src="source/js/lowVersion.js"></script>
    <h1 class="center-fixed">屌丝也需要体验，IE6、IE7再见</h1>
<![endif]-->
<header>
    <div class="wrapper">
        <div class="logo"><a href="#"><h1><img src="source/img/logo.png" alt="前"/>端资源导航</h1></a></div>
        <div class="search">
            <form>
                <input type="text" class="keyword default-word" id="keyword" value="GitHub 中国开发者年度报告">
                <input type="button" value="百度你懂得" name="baidu" id="baidu" class="button">
                <input type="button" value="谷歌神器" name="google" id="google" class="button">
            </form>
        </div>
        <div class="gadgets">
            <ul>
                <li><a href="http://translate.google.cn/" target="_blank" title="Google翻译"><i class="iconfont icon-fanyi"></i>翻译工具</a></li>
                <li class="jsbin"><a href="http://jsbin.com/" target="_blank" title="Jsbin"><i class="iconfont icon-bianji"></i>线上编译</a></li>
                <li><a href="/" title="加入收藏"><i class="iconfont icon-shoucang"></i>按Ctrl+D收藏导航</a></li>
            </ul>
        </div>
    </div>
</header>
<div class="statistics">
    <div class="wrapper">
        <p id="statistics">
            最新统计：
            <span title="国内前端工程师不完全统计个数">5,462,938</span>名前端工程师，
            <span title="站内导航">120</span> 个导航，
            <span title="GitHub 2014年不完全统计JavaScript/CSS">487,971 / 235,833</span> 个项目
        </p>
    </div>
</div>
<div class="container">
    <div class="wrapper">
        <section>
            <div class="nav-header">
                <h2><a href="javascript:void(0)"><i class="iconfont icon-gongjulei216"></i><span class="big">编</span>辑工具</a></h2>
            </div>
            <nav>
                <ul class="clearfix">
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-tuijian02"></i></div>
                        <a href="http://www.jetbrains.com/webstorm/" target="_blank"><div class="tool-logo webstorm"></div>WebStorm</a>
                        <p>Jetbrains公司旗下一款JavaScript 开发工具，被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-tuijian02"></i></div>
                        <a href="http://www.sublimetext.com/" target="_blank"><div class="tool-logo sublime"></div>Sublime Text</a>
                        <p>一套跨平台的文本编辑器，支持基于Python的插件。Sublime Text 是专有软件，可通过包（Package）扩充本身的功能。大多数的包使用自由软件授权发布，并由社区建置维护</p>
                    </li>
                    <li>
                        <a href="http://www.aptana.com/" target="_blank"><div class="tool-logo aptana"></div>Aptana</a>
                        <p>一个基于Eclipse的集成式Web开发环境，其最广为人知的是它非常强悍的JavaScript编辑器和调试器</p>
                    </li>
                    <li>
                        <a href="http://notepad-plus-plus.org/" target="_blank"><div class="tool-logo notepad"></div>Notepad++</a>
                        <p>一套自由软件的纯文本编辑器，由台湾人侯今吾基于同是开放源代码的Scintilla文本编辑组件并独力研发</p>
                    </li>
                    <li>
                        <a href="http://brackets.io/" target="_blank"><div class="tool-logo brackets"></div>Brackets</a>
                        <p>一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe 创建和维护，根据MIT许可证发布，支持 Windows、Linux 以及 OS X 平台</p>
                    </li>
                    <li>
                        <a href="https://creative.adobe.com/products/download/dreamweaver" target="_blank"><div class="tool-logo dreamweaver"></div>Dreamweaver</a>
                        <p>第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页</p>
                    </li>
                    <li>
                        <a href="http://topstyle4.com/" target="_blank"><div class="tool-logo topstyle"></div>TopStyle</a>
                        <p>一款 CSS 开发辅助工具，即 HTML5 / CSS3 编辑器，它专注于 HTML CSS 设计辅助，提供比较多的功能，如 CSS 代码检查等，据称 TopStyle 的帮助文件非常好，有详细的 CSS 指令，适于初次接触 CSS 的学习之用</p>
                    </li>
                    <li>
                        <a href="http://komodoide.com/" target="_blank"><div class="tool-logo komodo"></div>Komodo</a>
                        <p>一个跨平台支持多种程序语言的Integrated Development Environment （IDE）软件，目前他支持了在Windows与Linux上 ，Pythone, Ruby, Rails, Perl, HTML, CSS, and JavaScript,等的程序语言开发，以及多种程序语言语法着色</p>
                    </li>
                    <li>
                        <a href="https://chocolatapp.com/" target="_blank"><div class="tool-logo chocolat"></div>Chocolat</a>
                        <p>Mac系统上最新出现的一款强大的文本编辑器，兼具原生的Cocoa及强大的文本编辑功能。Chocolat支持多种编程语言的关键字高亮显示、窗口分割、标签页、色彩主题等功能。界面和MacVim非常相似</p>
                    </li>
                </ul>
            </nav>
        </section>
        <section>
            <div class="nav-header">
                <h2><a href="javascript:void(0)"><i class="iconfont icon-IDE"></i><span class="big">在</span>线IDE</a></h2>
                <div class="stress bottom left column-new"><i class="iconfont icon-new"></i></div>
            </div>
            <nav>
                <ul class="clearfix">
                    <li>
                        <a href="http://dabblet.com/" target="_blank">Dabblet</a>
                        <p>跨浏览器兼容，对前端攻城师们来说是一个不得不处理的问题。为了在浏览器间呈现统一的显示效果，攻城师们不仅要为每个游览器添加CSS前缀，甚至还需要用到一些特殊的CSS Hack技巧。于是，jsFiddle、JSBin等前端代码的在线测试工具应运而生。然而，使用jsFiddle仍有很多不便之处。为了解决这个问题，前端攻城师Lea Verou自己动手，开发了一个名为Dabblet的HTML和CSS代码段在线测试工具</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-tuijian02"></i></div>
                        <a href="http://jsfiddle.net/" target="_blank">Jsfiddle</a>
                        <p>jsFiddle是一个在线的shell编辑器，通过流行的JS框架创建自定义的环境，以简化JS代码。可以用于测试示例代码。不仅如此，你还可以添加一个Ajax echo后端，并且通过一系列的JavaScript框架自动载入资源，如MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla等</p>
                    </li>
                    <li>
                        <a href="http://codemirror.net/" target="_blank">CodeMirror</a>
                        <p>又一款“Online Source Editor”，基于Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-tuijian02"></i></div>
                        <a href="http://jsbin.com/" target="_blank"> JS Bin</a>
                        <p>JSBin 是一个 Web 应用，主要用于帮助测试 JavaScript 和 CSS 的代码片段。功能与 jsFiddle 网站一致</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-tuijian02"></i></div>
                        <a href="https://c9.io/" target="_blank">Cloud9</a>
                        <p>利用了云技术，运行在浏览器中，允许你随时随地运行、调试和部署应用程序。一个完整的game-changer会永久性的改变应用程序的开发方式。Cloud 9可以让你集中精力编程，不用顾及到搭建环境等琐事中</p>
                    </li>
                </ul>
            </nav>
        </section>
        <section>
            <div class="nav-header">
                <h2><a href="javascript:void(0)"><i class="iconfont icon-niu"></i><span class="big">国</span>外牛人</a></h2>
            </div>
            <nav>
                <ul class="clearfix">
                    <li>
                        <a href="http://paulirish.com" target="_blank">Paul Irish</a>
                        <p>著名的前端开发工程师，同时他也是Chrome开发者关系团队成员，jQuery团队成员，Modernizr、 Yeoman、CSS3 Please和HTML5 Boilerplate的lead developer</p>
                    </li>
                    <li>
                        <a href="http://tjholowaychuk.com" target="_blank">TJ Holowaychuk</a>
                        <p>程序员兼艺术家，Koa、Co、Express、jade、mocha、node-canvas、commander.js 等知名开源项目的创建和贡献者</p>
                    </li>
                    <li>
                        <a href="http://addyosmani.com" target="_blank">Addy Osmani</a>
                        <p>谷歌前端开发工程师，创建了 TodoMVC、jQuery UI Bootstrap、jQuery Plugin Patterns 和 Backbone Paginator，出版了《Learning JavaScript Design Patterns》和《Developing Backbone.js Applications》两本技术书籍，而且还是著名的 jQuery、Modernizr 以及Backbone.js 框架的贡献者</p>
                    </li>
                    <li>
                        <a href="http://ejohn.org/" target="_blank">John Resig</a>
                        <p>jQuery的创始人和技术领袖，目前在Mozilla担任JavaScript工具开发工程师。著有《Pro JavaScript Techniques》（即《精通JavaScript》）等经典JavaScript书籍</p>
                    </li>
                    <li>
                        <a href="http://www.crockford.com/" target="_blank">Douglas Crockford</a>
                        <p>JavaScript开发社区最知名的权威，是JSON、JSLint、JSMin和ADSafe之父，是《JavaScript: The Good Parts》的作者。他同时也服务于ECMA的JavaScript2.0技术委员会（TC39）</p>
                    </li>
                    <li>
                        <a href="http://bost.ocks.org" target="_blank">Mike Bostock</a>
                        <p>纽约时报图形编辑，知名可视化库 D3.js的主要作者</p>
                    </li>
                    <li>
                        <a href="https://www.gittip.com/mdo/" target="_blank">Mark Otto</a>
                        <p>Twitter前设计师，与Jacob Thornton合作开发了大名鼎鼎的CSS/HTML框架Bootstrap</p>
                    </li>
                    <li>
                        <a href="http://substack.net/" target="_blank">James Halliday</a>
                        <p>node社区最活跃的贡献者，NPM排名仅次于TJ Holowaychuck，在写代码之外他还是个自成一派的 插画家。目前substack在NPM上发布了300+的模块</p>
                    </li>
                    <li>
                        <a href="http://mrdoob.com" target="_blank">Mr.doob</a>
                        <p>JS三维模型库three.js, Code Editor（编码器）的作者</p>
                    </li>
                    <li>
                        <a href="https://jlord.github.io" target="_blank">Jessica Lord</a>
                        <p>2013年5月份加入Github设计团队。是开源项目sheetsee.js的作者</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="https://jlord.github.io" target="_blank">Steve Souders</a>
                        <p>就职于Google；《High Performance Web Sites》的作者，创建了YSlow，位居Firefox扩展TOP25的首位，创建了很多其他的性能工具和服务，包括HTTP Archive、Cuzillion、Jdrop、SpriteMe、ControlJS和Browserscope，担任Velocity的联合主席，Firebug Working Group的联合创始人，在斯坦福大学教授 “CS193H: High Performance Web Sites”科目，经常进行公开演讲</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="https://jlord.github.io" target="_blank">Mathias Bynens</a>
                        <p>协助开发多个开源项目，如jsPerf、HTML5 Boilerplate</p>
                    </li>
                </ul>
            </nav>
        </section>
        <section>
            <div class="nav-header">
                <h2><a href="javascript:void(0)"><i class="iconfont icon-ren"></i><span class="big">国</span>内牛人</a></h2>
            </div>
            <nav>
                <ul class="clearfix">
                    <li>
                        <a href="https://lifesinger.wordpress.com/" target="_blank">玉伯</a>
                        <p>淘宝前端类库 KISSY、前端模块化开发框架SeaJS、前端基础类库Arale的创始人</p>
                    </li>
                    <li>
                        <a href="http://www.ruanyifeng.com/blog/" target="_blank">阮一峰</a>
                        <p>70年代生于上海。毕业于上海财经大学，经济学博士，同时也是程序员，个人博客访问量过千万，译有《黑客与画家》、《软件随想录》。目前供职于一所上海本地高校。本文为阮一峰笔记体博客文集《如何变得有思想？》和《一个寻找作者的读者》的代序</p>
                    </li>
                    <li>
                        <a href="http://blog.zhaojie.me/" target="_blank">老赵</a>
                        <p>金融行业程序员，目前就职于摩根大通（香港）。多年微软MVP，InfoQ中文站兼职编辑。虽然广泛涉猎各类技术，但早就被人民群众贴上“微软”标签，现已认命</p>
                    </li>
                    <li>
                        <a href="http://html5ify.com/" target="_blank">朴灵</a>
                        <p>阿里数据平台数据产品部资深工程师。致力前端、数据可视化、Node等领域</p>
                    </li>
                    <li>
                        <a href="http://hikejun.com/blog/" target="_blank">克军</a>
                        <p>前雅虎中国前端工程师，现豆瓣前端工程师，休闲范儿长发帅哥一枚</p>
                    </li>
                    <li>
                        <a href="http://www.cnblogs.com/rubylouvre/" target="_blank">司徒正美</a>
                        <p>著名的JavaScript专家，去哪儿网前端架构师，立志做考古学家的日语系工程师，穿梭于二次元与二进制间的“魔法师”，做过陶艺，写过小说，涉猎Java、Ruby、 JavaScript。曾出版《JavaScript框架设计》一书</p>
                    </li>
                    <li>
                        <a href="http://www.cnblogs.com/winter-cn/" target="_blank">Winter</a>
                        <p>阿里巴巴高级技术专家，著名JavaScript专家。曾参与Bambook开发，更早为微软工作，开发Windows CE平台的IE浏览器</p>
                    </li>
                    <li>
                        <a href="https://github.com/rogerwang" target="_blank">周爱民</a>
                        <p>Node-Webkit的项目发起人。目前任职于Intel公司开源技术中心（OTC），从事Web和浏览器技术开发工作。现在主要工作是开发和维护Node-Webkit项目。此前从事过MeeGo、Tizen和JNI xml性能库的开发和数据中心解决方案服务。毕业于中科大少年班，在计算机系获得博士学位，研究方向为高性能计算</p>
                    </li>
                    <li>
                        <a href="https://github.com/sofish" target="_blank">小鱼</a>
                        <p>国内资深前端开发工程师，Web 标准布道者，前支付宝前端开发部 CSS 样式库负责</p>
                    </li>
                    <li>
                        <a href="http://fengmk2.com/" target="_blank">苏千</a>
                        <p>淘宝网数据产品部资深Web开发工程师，CNode.org社区核心成员</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="http://www.cnblogs.com/TomXu/" target="_blank">汤姆大叔</a>
                        <p>熟悉Waterfall、Agile(Scrum&XP)，染指C#、ASP.NET、MVC、EF、NHibernate、SQL Server、Oracle、JavaScript、HTML5、CSS3、JQuery、Knockout、Silverlight、WPF、WCF、ADFS等技术</p>
                    </li>
                </ul>
            </nav>
        </section>
        <section>
            <div class="nav-header">
                <h2><a href="javascript:void(0)"><i class="iconfont icon-yidongjsjiance"></i><span class="big">JS</span>框架</a></h2>
            </div>
            <nav>
                <ul class="clearfix">
                    <li>
                        <a href="http://www.angularjs.org/" target="_blank"><div class="tool-logo AngularJS"></div>AngularJS</a>
                        <p>Google收购，用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好</p>
                    </li>
                    <li>
                        <a href="http://backbonejs.org/" target="_blank"><div class="tool-logo Backbone"></div>Backbone.js</a>
                        <p>一种种重量级javascript  MVC 应用框架,通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互</p>
                    </li>
                    <li>
                        <a href="http://emberjs.com/" target="_blank"><div class="tool-logo Ember"></div>Ember.js</a>
                        <p>一个雄心勃勃的Web应用程序，消除了样板，并提供了一个标准的应用程序架构的JavaScript框架</p>
                    </li>
                    <li>
                        <a href="http://knockoutjs.com/" target="_blank"><div class="tool-logo knockout"></div>knockout</a>
                        <p>一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化</p>
                    </li>
                    <li>
                        <a href="http://todomvc.com/" target="_blank"><div class="tool-logo todomvc"></div>todomvc</a>
                        <p>帮助你选择一个MV*框架</p>
                    </li>
                    <li>
                        <a href="http://spinejs.com/" target="_blank">Spine.js</a>
                        <p>通常与 Backbone.js 进行比较；它受到 Backbone.js 的影响，并在使用率方面与前者接近。Spine.js 包含类、模型、控制器和视图，这比 Backbone.js 引入的集合更加传统一些</p>
                    </li>
                    <li>
                        <a href="http://polymer-project.org/" target="_blank"><div class="tool-logo Polymer"></div>Polymer</a>
                        <p>加盟Google的原Palm webOS开发团队打造，是一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。Web Components则提供了一种更彻底的解耦方式，更加方便了UI的开发和模块化，可以说是Polymer的基础之一</p>
                    </li>
                    <li>
                        <a href="http://facebook.github.io/react/" target="_blank"><div class="tool-logo React"></div>React</a>
                        <p>Facebook开源的JavaScript库，用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="http://labjs.com/" target="_blank">LABjs</a>
                        <p>Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="http://requirejs.org/" target="_blank">RequireJS</a>
                        <p>鼓励代码的模块化，它使用了不同于传统 script 标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="http://seajs.org/docs/" target="_blank">Sea.js</a>
                        <p>简单友好的模块定义规范：Sea.js 遵循 CMD 规范，可以像 Node.js 一般书写模块代码。自然直观的代码组织方式：依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="http://docs.kissyui.com/" target="_blank">Kissy</a>
                        <p>淘宝开源，一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。除了完备的工具集合如 DOM、Event、Ajax、Anim 等，它还提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架，KISSY 为移动终端做了大量适配和优化，让你的程序在全终端均能流畅运行。</p>
                    </li>
                </ul>
            </nav>
        </section>
        <section>
            <div class="nav-header">
                <h2><a href="javascript:void(0)"><i class="iconfont icon-ui"></i><span class="big">UI</span>框架</a></h2>
            </div>
            <nav>
                <ul class="clearfix">
                    <li>
                        <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a>
                        <p>目前开源社区最受欢迎的项目之一，可谓大名鼎鼎了，最新版本3.x兼容IE9+</p>
                    </li>
                    <li>
                        <a href="http://foundation.zurb.com/" target="_blank">Foundation</a>
                        <p>属于WEB前端框架的先驱者，知名度被Bootstrap反超，但其优秀程度相比Bootstrap只强不弱！最新版本5.x兼容IE9+</p>
                    </li>
                    <li>
                        <a href="http://blog.zhaojie.me/" target="_blank">Semantic UI</a>
                        <p>UI框架的后起之秀，UI动画效果很棒，一个很有潜力的项目！兼容IE9+</p>
                    </li>
                    <li>
                        <a href="http://knockoutjs.com/" target="_blank"><div class="tool-logo knockout"></div>knockout</a>
                        <p>一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化</p>
                    </li>
                    <li>
                        <a href="http://purecss.io/" target="_blank">Pure</a>
                        <p>IE7+，大名鼎鼎的Yahoo!支持开发的UI框架，其特点简洁小巧，对于喜欢简洁的朋友来说是一个不可多得的好项目!</p>
                    </li>
                    <li>
                        <a href="http://www.yaml.de/" target="_blank">YAML</a>
                        <p>IE6+，一个历史悠久的前端框架，功能单一小巧，模块化的 CSS 框架，特点是灵活、可访问和响应式</p>
                    </li>
                    <li>
                        <a href="http://jqueryui.com/" target="_blank">jQuery UI</a>
                        <p>IE6+,以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件</p>
                    </li>
                    <li>
                        <a href="http://famo.us/" target="_blank">Famo.us</a>
                        <p>用于构建移动应用以及桌面应用，独特之处在于其javaScript渲染引擎和3D物理引擎，它向开发者展示了使用JavaScript也能达到原生应用程序动画的质量</p>
                    </li>
                    <li>
                        <a href="http://concisecss.com/" target="_blank">Concise</a>
                        <p>适合从头构建移动应用，而且还包含了一个简单的网格布局系统、漂亮的印刷字体，以及少量花哨的特性</p>
                    </li>
                    <li>
                        <a href="http://onsen.io/" target="_blank">OnSenUI</a>
                        <p>适合PhoneGap/Cordova混合应用的开发，它注重差劲可用的移动应用</p>
                    </li>
                    <li>
                        <a href="http://tuktuk.tapquo.com/" target="_blank">Tuktuk</a>
                        <p>一个轻量级的面向对象的CSS框架，使用它可以轻松地创建响应式、可扩展的网站。它包括多达12列的网格布局，以及表单、按钮、表格、打印字体等等</p>
                    </li>
                </ul>
            </nav>
        </section>
        <section>
            <div class="nav-header">
                <h2><a href="javascript:void(0)"><i class="iconfont icon-pcjs"></i><span class="big">JS</span>库</a></h2>
            </div>
            <nav>
                <ul class="clearfix">
                    <li>
                        <a href="http://jquery.com/" target="_blank">jQuery</a>
                        <p>最新版v2.1.3 兼容IE9+，文档说明很全很想起，社区很大。操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能</p>
                    </li>
                    <li>
                        <a href="http://prototypejs.org/" target="_blank">Prototype</a>
                        <p>最新版v1.7.2 兼容IE6+，非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax</p>
                    </li>
                    <li>
                        <a href="http://zeptojs.com/" target="_blank">Zepto</a>
                        <p>最新版v1.7.2 兼容IE10+，一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api</p>
                    </li>
                    <li>
                        <a href="http://yuilibrary.com/" target="_blank">YUI</a>
                        <p>最新版v3.18.1 兼容IE10+，建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术</p>
                    </li>
                    <li>
                        <a href="http://underscorejs.org/" target="_blank">Underscore.js</a>
                        <p>提供了100多个函数,包括常用的: map, filter, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等</p>
                    </li>
                    <li>
                        <a href="http://snapsvg.io/" target="_blank">snapsvg</a>
                        <p>用于在HTML前端生成SVG的JavaScript工具集；SVG的工具集其实有很多，如svg.js、raphaeljs，离开了这些工具，我们依然可以实现SVG作图，只不过要自己写SVG XML</p>
                    </li>
                    <li>
                        <a href="http://dojotoolkit.org/" target="_blank">Dojo</a>
                        <p>让你更容易使Web页面具有动态能力，或者在任何能够稳定支持JavaScript语言的环境中发挥作用</p>
                    </li>
                    <li>
                        <a href="http://www.mochikit.com/" target="_blank">MochiKit</a>
                        <p>一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。</p>
                    </li>
                    <li>
                        <a href="http://mootools.net/core" target="_blank">MooTools</a>
                        <p>一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="http://mockjs.com/" target="_blank">Mock.js</a>
                        <p>一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。根据数据模板生成模拟数据、模拟 Ajax 请求，生成并返回模拟数据、基于 HTML 模板生成模拟数据</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="http://threejs.org/" target="_blank">Three.js</a>
                        <p>JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="http://d3js.org/" target="_blank">D3.js</a>
                        <p>最流行的可视化库之一，它可以将任意数据绑定到DOM（Document Object Model，文档对象模型），然后对该文件提供数据驱动转换。还可以将一组数据生成基本的HTML表，或生成一个SVG条形图</p>
                    </li>
                </ul>
            </nav>
        </section>
        <section>
            <div class="nav-header">
                <h2><a href="javascript:void(0)"><i class="iconfont icon-filecss"></i><span class="big">CSS</span>库</a></h2>
            </div>
            <nav>
                <ul class="clearfix">
                    <li>
                        <a href="http://hiloki.github.io/kitecss/" target="_blank">Kite</a>
                        <p>一个灵活的布局助手CSS库。Kite使用`inline-block`而不是最新的CSS语法。它注重实际，易于理解且容易使用。Kite用 法与flexbox相似：justify-content,等等。你可以很轻松地创建复杂的模块。Kite是基于OOCSS 与 MindBEMding，它可以帮助您快速构建自己的组件。Kite支持几乎所有浏览器，它属于MIT许可</p>
                    </li>
                    <li>
                        <a href="http://www.vittoriozaccaria.net/dyn-css/#what-is-it" target="_blank">DynCSS</a>
                        <p>将您的CSS解析成-dyn-(attribute)规则。这些规则是模拟浏览器事件(如滚动和缩放)的javascript表达式。其结果会应用到上面 指出的CSS属性。你可以将任何CSS属性设置为动态--前提是它对于jQuery的css()方法是可写的。你可以通过附加-dyn-前缀并指定一个引 用的javascript表达式来实现</p>
                    </li>
                    <li>
                        <a href="http://ianlunn.github.io/Hover/" target="_blank">Hover.CSS</a>
                        <p>一个有用的CSS3悬停效果集合，可用于动作调用，按钮，商标，特性图片等。 自定或直接应用到你自己的元素上都非常的简单。 hover.css可以用多种方式来使用; 可以复制粘贴你喜欢的效果到你自己的样式表里，也可以引用样式表。然后只需向你想要的元素需添加对应效果的class名称即可。如果你只打算使用一个或几 个效果，最佳实践是复制粘贴一个效果。</p>
                    </li>
                    <li>
                        <a href="http://tobiasahlin.com/spinkit/" target="_blank">Spinkit</a>
                        <p>一个酷炫的加载动画CSS集合。 Spinkit使用CSS动画来创建吸引人的易于自定义的动画。该集合目标不是提供所有浏览器的解决方案--如果你需要支持哪些还没实现CSS动画属性 （像是IE9及之前的版本）的浏览器，你需要检测下这些动画属性并实现一个变通方案。</p>
                    </li>
                    <li>
                        <a href="http://www.minimamente.com/example/magic_animations/" target="_blank">Magic CSS3 Animations</a>
                        <p>一个特殊效果的CSS3动画库，你可以免费用于你的web项目。简单的引用CSS样式：magic.css或精简版magic.min.css即可</p>
                    </li>
                    <li>
                        <a href="http://alexwolfe.github.io/Buttons/" target="_blank">Buttons</a>
                        <p>一个可以创建高度自定义、灵活和现代感十足的web按钮的CSS库。该库由Sass+Compass构建，支持正方形、圆角矩形或 者圆形的按钮，并且可选是否扁平以及其他自定义的效果（如发光）。所使用到的尺寸、颜色、效果和字体可以通过变量的帮助进行修改，并且可以非常容易的进行 扩展。</p>
                    </li>
                    <li>
                        <a href="http://projects.lukehaas.me/css-loaders/" target="_blank">CSS Spinner</a>
                        <p>一个CSS螺旋动画加载的集合。每个旋转包含一个使用‘loader’ class的div，其文本内容为‘Loading…’。文本是为屏幕阅读器使用的且可用作老浏览器的后退的状态。</p>
                    </li>
                    <li>
                        <a href="http://devinhunt.github.io/typebase.css/" target="_blank">Typebase.css</a>
                        <p>是个最小化的、可定制的字体样式表。它有less和SASS版本，所以能够很容易地修改融入现代的Web项目。它提供了所有排版 所必要的基础工具且不需添加其他任何设计内容。它被创建用来完成项目发展和成长期时的修改，能和normalize.css很好的工作</p>
                    </li>
                    <li>
                        <a href="http://csswizardry.com/beautons/" target="_blank">Beautons</a>
                        <p>一个用来创建漂亮、简洁按钮的易用库。你可以应用各种样式、函数已经其他的更多内容到按键上，包括改变它们的大小，设置它们的可用与否以及更多设置</p>
                    </li>
                    <li>
                        <a href="http://kushagragour.in/lab/hint/" target="_blank">Hint.css</a>
                        <p>一个使用SASS构建只使用CSS和HTML的提示库。该库使用数据属性、内容属性、伪元素以及CSS3转换。提示框简洁漂亮，有箭头且可放置在父元素的任何一边</p>
                    </li>
                </ul>
            </nav>
        </section>
        <section>
            <div class="nav-header">
                <h2><a href="javascript:void(0)"><i class="iconfont icon-shequ"></i><span class="big">相</span>关社区</a></h2>
                <div class="stress bottom left column-new"><i class="iconfont icon-new"></i></div>
            </div>
            <nav>
                <ul class="clearfix">
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-tuijian02"></i></div>
                        <a href="https://github.com/" target="_blank"><div class="tool-logo GitHub"></div>GitHub</a>
                        <p>一个分布式的版本控制系统，最初由Linus Torvalds编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在Ruby社区中</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-tuijian02"></i></div>
                        <a href="http://stackoverflow.com/" target="_blank"><div class="tool-logo StackOverflow"></div>StackOverflow</a>
                        <p>一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题，浏览问题，索引相关内容，在创建主页的时候使用简单的HTML。在问题页面，我们不会弹出任何广告，销售信息，JavaScript 窗口等</p>
                    </li>
                    <li>
                        <a href="http://segmentfault.net/" target="_blank">SegmentFault</a>
                        <p>一家中文的开发者社区及媒体。最初的产品原型来自于国外最大的程序员问答社区 StackOverflow，但其产品形态经过一年多的发展，已经有问答、博客、活动等，它还是多个黑客马拉松活动的组织方。</p>
                    </li>
                    <li>
                        <a href="https://code.google.com/" target="_blank">Google Code</a>
                        <p>Google公司利用自身服务器资源提供的开发人员主页。其最初目的是为Google自身的开源软件提供开发平台，以及协助开发者扩展Google产品的功能。随着Google开源之夏等项目的推进，Google代码正在成为一个开放的项目托管平台。</p>
                    </li>
                </ul>
            </nav>
        </section>
        <section>
            <div class="nav-header">
                <h2><a href="javascript:void(0)"><i class="iconfont icon-shu"></i><span class="big">推</span>荐书籍</a></h2>
                <div class="stress bottom left column-new"><i class="iconfont icon-new"></i></div>
            </div>
            <nav>
                <ul class="clearfix">
                    <li>
                        <a href="http://www.amazon.cn/gp/product/B009WMAZC0/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B009WMAZC0&linkCode=as2&tag=f2enav-23" target="_blank">《大巧不工》</a>
                        <p>2013年7月19日，以Web前端设计的流程为主线，以前端设计的方法和原则为基础，围绕原型设计、模型设计、可用性设计、一致性设计和以用户为中心的设计等关键技术探讨了前端设计的规范、技巧与最佳实践.同时对Web前端设计领域的经典设计思维进行了剖析，为读者提供了极具指导价值的思想和极具操作性的实践方法。此外，《大巧不工:Web前端设计修炼之道》还讲解了前端性能的测试和度量方法，总结了大量前端性能优化技巧</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-tuijian02"></i></div>
                        <a href="http://www.amazon.cn/gp/product/B00JMKWHFU/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B00JMKWHFU&linkCode=as2&tag=f2enav-23" target="_blank">《Web性能权威指南》</a>
                        <p>2014年5月1日，适合所有Web应用及站点开发人员阅读，包括但不限于前端、后端、运维、大数据分析、UI／UX、存储、视频、实时消息，以及性能工程师。</p>
                    </li>
                    <li>
                        <a href="http://www.amazon.cn/gp/product/B00H6X6DIW/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B00H6X6DIW&linkCode=as2&tag=f2enav-23" target="_blank">《Web站点优化》</a>
                        <p>Andy King重视搜索引擎营销与Web优化之间内在的协同。他是一个思想领导者并且确实懂得Web站点优化的复杂性。这本书中研究的深度和所教授的经验令人惊讶。本书是优化你的Web站点和进行利润最大化的最佳实践所必需的一本书</p>
                    </li>
                    <li>
                        <a href="http://www.amazon.cn/gp/product/B008HN793I/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B008HN793I&linkCode=as2&tag=f2enav-23" target="_blank">《Node.js开发指南》</a>
                        <p>首先简要介绍Node.js，然后通过各种示例讲解Node.js的基本特性，再用案例式教学的方式讲述如何用Node.js进行Web开发，接着探讨一些Node.js进阶话题，最后展示如何将一个Node.js应用部署到生产环境中</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-tuijian02"></i></div>
                        <a href="http://www.amazon.cn/gp/product/B007OQQVMY/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B007OQQVMY&linkCode=as2&tag=f2enav-23" target="_blank">《JS高级程序设计》</a>
                        <p>将对JavaScript追根溯源，从它在最早的Netscape浏览器中诞生谈起，一直谈到今天的它对DOM和AjaX的强大支持。读者将通过《JavaScript高级程序设计(第3版)》掌握如何运用和扩展这门语言，从而更好地满足自己的需求，以及如何实现客户端与服务器的无缝通信，而又不必求助于Java或隐藏的网页框架（frame元素）</p>
                    </li>
                    <li>
                        <a href="http://www.amazon.cn/gp/product/B007VISQ1Y/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B007VISQ1Y&linkCode=as2&tag=f2enav-23" target="_blank">《JS权威指南》</a>
                        <p>经典权威的JavaScript工具书，是程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册。第6版涵盖HTML5和ECMAScript5</p>
                    </li>
                    <li>
                        <a href="http://www.amazon.cn/gp/product/B0097CON2S/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B0097CON2S&linkCode=as2&tag=f2enav-23" target="_blank">《JS语言精粹》</a>
                        <p>一门美丽的、优雅的、轻量级的和非常富有表现力的语言，它使您创建高效的代码，不管您编写代码的目的是管理对象库还是仅仅使Ajax运行得更快。如果您为web开发站点或应用程序，这本《JavaScript语言精粹》绝对应该是必备的</p>
                    </li>
                    <li>
                        <a href="http://www.amazon.cn/gp/product/B0011F5SIC/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B0011F5SIC&linkCode=as2&tag=f2enav-23" target="_blank">《CSS权威指南》</a>
                        <p>告诉你怎样将最新的CSS2以CSS2.1里面所定义的各种CSS元素应用到实际工作当中。通过书中的例子，你将学会怎样使用CSS创建或修改网站的外观，并且达到普通HTML无法实现的效果</p>
                    </li>
                    <li>
                        <a href="http://www.amazon.cn/gp/product/B00GOM5IL4/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B00GOM5IL4&linkCode=as2&tag=f2enav-23" target="_blank">《深入浅出Node.js》</a>
                        <p>Node.js让JavaScript在服务器端焕发生机，这是一本带着文艺调调的好看的技术书，书中详细阐述TNode.js的方方面面。如果你是前端工程师，这会是你迈向全端工程师的关键一步</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-tuijian02"></i></div>
                        <a href="http://www.amazon.cn/gp/product/B00D6MT3LG/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B00D6MT3LG&linkCode=as2&tag=f2enav-23" target="_blank">《JS设计模式》</a>
                        <p>如何把经典和现代设计模式应用到JavaScript语言中，来编写优美、结构化和可维护的代码。如果想让代码保持高效、更易于管理，并且能同步最新的最佳实践，那么本书正是为你打造的</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="http://www.amazon.cn/gp/product/B008XFDQ14/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B008XFDQ14&linkCode=as2&tag=f2enav-23" target="_blank">《HTTP权威指南》</a>
                        <p>详细解释了HTTP协议，包括HTTP是如何工作的，如何用HTTP来开发基于Web的应用程序，核心的因特网协议如何与架构构建块交互，如何正确实现因特网客户和服务器等。《HTTP权威指南》的中心内容是HTTP，本质是理解Web的工作原理，以及如何将这些知识应用到Web编程和管理之中，主要涵盖HTTP的技术运作方式、产生动机、性能和目标以及一些相关技术问题</p>
                    </li>
                    <li>
                        <div class="stress top right recommendation"><i class="iconfont icon-newnew"></i></div>
                        <a href="http://www.amazon.cn/gp/product/B00B14IGUK/ref=as_li_tf_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B00B14IGUK&linkCode=as2&tag=f2enav-23" target="_blank">《Web前端黑客》</a>
                        <p>Web前端的黑客攻防技术是一门非常新颖且有趣的黑客技术，主要包含Web前端安全的跨站脚本（XSS）、跨站请求伪造（CSRF）、界面操作劫持这三大类，涉及的知识点涵盖信任与信任关系、Cookie安全、Flash安全、DOM渲染、字符集、跨域、原生态攻击、高级钓鱼、蠕虫思想等，这些都是研究前端安全的人必备的知识点。《安全技术大系:Web前端黑客技术揭秘》作者深入剖析了许多经典的攻防技巧，并给出了许多独到的安全见解</p>
                    </li>
                </ul>
            </nav>
        </section>
        <section>
            <p class="tips-update">持续更新中...</p>
        </section>
    </div>
</div>

<footer>
    <div class="wrapper">
        <div class="content">

            <div class="cooperation">
                <p class="vam gray labels clearfix">
                    <span>官网微博：</span>
                    <a title="官网微博" href="http://weibo.com/ycrow" target="_blank">
                        <img src="source/img/weibo_172_172.png" alt="官网微博"/>
                    </a>
                </p>
            </div>

        </div>
        <div class="f2enav_group">
            <a href="http://www.w3cfuns.com/" target="_black">w3cfuns</a>
            <a href="http://www.daqianduan.com/" target="_black">大前端</a>
            <a href="http://www.css88.com/" target="_black">WEB前端开发</a>
            <a href="http://www.qianduan.net/" target="_black">前端观察</a>
            <a href="http://www.html-js.com/" target="_black">前端乱炖</a>
            <a href="http://www.w3cmark.com/" target="_black">前端笔记</a>
            <a href="http://div.io/#/welcome" target="_black" title="高质量前端资源汇聚">Div.IO</a>
            <a href="http://www.oschina.net/" target="_black">开源中国</a>
            <a href="http://www.csdn.net/" target="_black">CSDN</a>
            <a href="http://www.huxiu.com/" target="_black">虎嗅</a>
            <a href="http://www.html5cn.org/" target="_black">HTML5</a>
            <a href="http://bonsaiden.github.io/JavaScript-Garden/zh/" target="_black">JavaScript 秘密花园</a>
            <a href="http://www.cnblogs.com/" target="_black">博客园</a>
            <a href="http://www.gbtags.com/gb/index.htm" target="_black">极客标签</a>
            <a href="http://www.reddit.com/" target="_black">Reddit</a>
            <a href="http://www.agiledesigners.com/?utm_source=next.36kr.com" target="_black">Agile Designers</a>
            <a href="http://fequan.com/" target="_black">前端圈</a>
            <a href="http://html5doctor.com/" target="_black">html5doctor</a>
            <a href="http://www.zhihu.com/" target="_black">知乎</a>
            <a href="http://www.guokr.com/" target="_black">果壳网</a>
            <a href="http://www.wolonge.com/" target="_black">卧龙阁</a>
            <a href="http://www.36kr.com/" target="_black">36氪</a>
            <a href="http://www.neitui.me/" target="_black">内推网</a>
            <a href="http://www.51voa.com/" target="_black">51VOA</a>
            <a href="http://www.mianwww.com/" target="_black">IT公司面试手册</a>
            <a href="http://www.imooc.com/" target="_black">慕课网</a>
            <a href="http://www.mooc.cn/" target="_black">MOOC中国</a>
            <a href="http://study.163.com/" target="_black">网易云课堂</a>
            <a href="http://www.php100.com/index.html" target="_black">PHP100</a>
            <a href="https://octoverse.github.com/" title="GitHub发布的报告" target="_black">Octoverse</a>
            <a href="http://design.1sters.com/" target="_blank">Material Design 中文版</a>
            <a href="http://kangax.github.io/compat-table/es6/" target="_blank">ES6的支持</a>
        </div>

        <div class="extra">
            <div class="sns">
                关注 f2enav：
                <a href="http://weibo.com/ycrow" target="_blank" title="新浪微博"><i class="iconfont icon-weibiaoti1"></i></a>
                <!--<a href="/" title="微信"><i class="iconfont icon-weixinfangxing"></i></a>-->
            </div>

            <div class="copyright">
                <p>本网站设计及数据均受版权保护，任何公司及个人不得以任何方式复制，违者将依法追究责任，特此声明</p>
                © 2015 <a href="http://weibo.com/ycrow" target="_blank">@f2enav</a>
                - <a href="/sitemap" title="网站地图">网站地图</a>&nbsp;&nbsp;&nbsp;&nbsp;导航更新时间：2015年3月24日
                <br><a href="http://www.miibeian.gov.cn/" target="_blank" title="浙ICP备08103200号-2">陕ICP备15001850号-1</a>&nbsp;&nbsp;&nbsp;&nbsp;国内前端网站</div>
        </div>
    </div>
</footer>

<aside id="fixed">
    <div id="scrollUp" href="#top"><i class="iconfont icon-up"></i></div>
</aside>

<script src="source/js/vendor/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="source/js/vendor/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="build/js/f2enav.v0.0.1.min.js"></script>

<script>
    <!--百度统计-->
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?c09ff5f9f0f744ce7b5ff3b241b5cf0d";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

<!--

        //////////////////////////////////////////////////////
        //////////// /////////////////////////////////////////
        /// //// /// //////// ////////////////////////////////
        ////  ///  // //  ///  /// ///////////////////////////
        //  //  ///  / //  ///  //  //////////////////////////
        ////      //     /   //  //  /////////////////////////
        ///////                //  /  / //////////////////////
        /////                          / /////////////////////
        ///////                           ////////////////////
        /////////                          ///////////////////
        //////////                          //////////////////
        ///////////                           ////////////////
        //////////////                         ///////////////
        ///////////////                         //////////////
        ////////////////                        //////////////
        //////////////////                             ///////
        //////////////////                               /////
        ///////////////////                               ////
        ////////////////////                      ////      //
        /////////////////////   //             ////////////  /
        //////////////////////               /////////////////
        //////////////////                  //////////////////
        ////////////                       ///////////////////
        ////////        ///////////        ///////////////////
        ///////////////////////////////   ////////////////////
        /////////////////////////////////  ///////////////////
        ///////////////////////////////////  /////////////////
        ///////////////////////////////////// ////////////////
        /////////////////////////////////////// //////////////
        //////////////////////////////////////////////////////

-->

</body>
</html>